<template>
  <!-- 预览界面 -->
  <div id="render-app" @mousewheel="mouseWheel">
    <div v-if="configData.layer" id="render-box" class="topo-render" ref="imageTofile" :style="layerStyle"
      v-loading="loadingContro" :element-loading-text="loadingText" @contextmenu.prevent="onContextmenu"
      @mousemove="mouseMove" @mousedown="mouseDown" @mouseup="mouseUp" @mouseenter="mouseEnter"
      @mouseleave="mouseLeave">
      <template v-for="(component, index) in configData.components">
        <div :key="index" class="topo-render-wrapper sdfdsf" @click="throttle(component)"
          @dblclick="doDbClickComponent(component)"
          :class="{ 'topo-render-wrapper-clickable': component.action.length > 0 }"
          v-show="component.style.visible == undefined ? true : component.style.visible" :style="{
            left: component.style.position.x + 'px',
            top: component.style.position.y + 'px',
            width: component.style.position.w + 'px',
            height: component.style.position.h + 'px',
            backgroundColor: component.type == 'flow-bar' || component.type == 'flow-bar-dynamic' ? 'transparent' : component.style.backColor,
            zIndex: component.style.zIndex,
            transform: component.style.transformType,
            opacity: component.style.opacity,
            'border-radius': component.style.borderRadius + 'px',
            'box-shadow': '0 0 ' + component.style.boxShadowWidth + 'px 0 ' + component.style.boxShadowColor,
          }">
          <component v-bind:is="parseView(component)" :detail="component" ref="spirit" />
        </div>
      </template>
    </div>
    <!-- 组态预览小窗口 -->
    <el-dialog :title="windowPage" :visible.sync="childPage" :close-on-click-modal="false" :width="windowWidth + 'px'">
      <iframe :style="{ width: windowWidth - 40 + 'px', height: windowHeight + 'px', border: '#91939a 1px solid' }"
        :src="childUrl"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue';
import { mapMutations } from 'vuex';
import html2canvas from 'html2canvas';
import Contextmenu from 'vue-contextmenujs';

import TopoBase from './topoBase';
import topoUtil from '@/utils/topo/topo-util';
import { getByGuid, getDeviceStatus } from '@/api/scada/topo';
import { serviceInvoke } from '@/api/iot/runstatus';

// import { clearTimeout } from 'timers';

Vue.use(Contextmenu);

export default {
  name: 'TopoRender',
  extends: TopoBase,
  props: {
    defaultValue: Number,
    isShare: Boolean,
  },
  computed: {
    layerStyle: function () {
      var styles = [];
      styles = [`transform:scale(${this.selectedValue / 100})`];
      if (this.configData.layer.backColor) {
        styles.push(`background-color: ${this.configData.layer.backColor}`);
      }
      if (this.configData.layer.backgroundImage) {
        styles.push(`background-image: url("${this.configData.layer.backgroundImage}")`);
      }
      if (this.configData.layer.width > 0) {
        styles.push(`width: ${this.configData.layer.width}px`);
      }
      if (this.configData.layer.height > 0) {
        styles.push(`height: ${this.configData.layer.height}px`);
      }
      styles.push('overflow:hidden');
      var style = styles.join(';');
      return style;
    },
  },
  data() {
    return {
      scadaGuid: '', // guid
      configData: {}, // 组件数据
      bindDeviceList: [], // 被绑定设备
      selectedValue: this.defaultValue,
      width: 0,
      height: 0,
      ztTimer: null,
      ishow: true,
      key: 0,
      keyVertical: 0,
      loadingContro: false,
      loadingText: '指令下发中...',
      bindList: [],
      time: null,
      childPage: false,
      childUrl: '',
      windowWidth: '960',
      windowHeight: '600',
      windowPage: '子界面',
      newZoom: 0.2,
      displacement: {
        scale: 1,
      },
      throttleTimer: null,
      deviceTimer: null,
      notifyShow: false,
      isFullscreen: false,
      mouseOperate: '', // 鼠标操作
      x: 0, // 当前鼠标x
      y: 0, // 当前鼠标y
      l: 0, // 当前鼠标l
      t: 0, // 当前鼠标t
    };
  },
  mounted() {
    // this.$notify({
    //     title: '温馨提示',
    //     message: '键盘按下F11键或右键开启全屏，按下Esc退出全屏。',
    //     position: 'top-left',
    //     duration: 4500,
    // });
    this.scadaGuid = this.$route.query.guid;
    this.getZtData();
    this.connectMqtt();
  },
  destroyed() {
    this.mqttUnSubscribe(this.bindDeviceList); // 取消mqtt订阅
  },
  methods: {
    // 连接mqtt消息服务器
    async connectMqtt() {
      if (this.$mqttTool.client == null) {
        await this.$mqttTool.connect();
      }
      this.mqttCallback();
    },
    // mqtt回调处理
    mqttCallback() {
      this.$mqttTool.client.on('message', (topic, message, buffer) => {
        let topics = topic.split('/');
        let productId = topics[1];
        let deviceNum = topics[2];
        message = JSON.parse(message.toString());
        if (!message) {
          return;
        }
        if (topics[3] == 'status') {
          console.log('接收到【设备状态】主题：', topic);
          console.log('接收到【设备状态】内容：', message);
        }
        if (topics[4] == 'reply') {
          this.$modal.notifySuccess(message);
        }
        if (topic.endsWith('ws/service')) {
          console.log('接收到【物模型】主题：', topic);
          console.log('接收到【物模型】内容：', message);
          const data = {
            productId: productId,
            serialNumber: deviceNum,
            message: message,
          };
          this.setMqttData(data);
        }
      });
    },
    // mqtt订阅主题
    mqttSubscribe(list) {
      const topics = this.getSubscribeTopic(list);
      this.$mqttTool.subscribe(topics);
    },
    // mqtt取消订阅主题
    mqttUnSubscribe(list) {
      const topics = this.getSubscribeTopic(list);
      this.$mqttTool.unsubscribe(topics);
    },
    // 获取订阅主题
    getSubscribeTopic(list) {
      let topics = [];
      if (list && list.length !== 0) {
        list.forEach((item) => {
          const topicStatus = '/' + item.productId + '/' + item.serialNumber + '/status/post';
          const topicService = '/' + item.productId + '/' + item.serialNumber + '/ws/service';
          const topicMonitor = '/' + item.productId + '/' + item.serialNumber + '/monitor/post';
          const topicReply = '/' + item.productId + '/' + item.serialNumber + '/service/reply';
          topics.push(topicStatus);
          topics.push(topicService);
          topics.push(topicMonitor);
          topics.push(topicReply);
        });
      }
      return topics;
    },
    // 获取组态数据
    getZtData() {
      getByGuid(this.scadaGuid).then((res) => {
        const { data } = res;
        this.configData = JSON.parse(data.scadaData);
        document.title = data.pageName; // 修改title值
        this.mqttSubscribe(data.bindDeviceList); // 订阅mqtt主题
        this.bindDeviceList = data.bindDeviceList;

        // 双指缩放
        let that = this;
        if (window.screen.width < 1366) {
          that.selectedValue = 100;
          let rate = window.screen.width / 1920;
          if (that.is_andriod_ios().ios) {
            document.body.style.transform = 'scale(' + rate + ')';
          } else {
            document.body.style.zoom = rate;
          }
          that.newZoom = rate;
          // 获取放大或缩小的区域DOM
          document.body.addEventListener('touchstart', function (event) {
            var touches = event.touches;
            var events = touches[0];
            var events2 = touches[1];
            // 第一个触摸点的坐标
            that.displacement.pageX = events.pageX;
            that.displacement.pageY = events.pageY;
            that.displacement.moveable = true;
            if (events2) {
              that.displacement.pageX2 = events2.pageX;
              that.displacement.pageY2 = events2.pageY;
            }
            that.displacement.originScale = that.displacement.scale || 1;
          });
          document.addEventListener('touchmove', function (event) {
            if (!that.displacement.moveable) {
              return;
            }
            event.preventDefault();
            var touches = event.touches;
            var events = touches[0];
            var events2 = touches[1];
            // 双指移动
            if (events2) {
              // 第2个指头坐标在touchmove时候获取
              if (!that.displacement.pageX2) {
                that.displacement.pageX2 = events2.pageX;
              }
              if (!that.displacement.pageY2) {
                that.displacement.pageY2 = events2.pageY;
              }
              // 双指缩放比例计算
              var zoom =
                that.getDistance(
                  {
                    x: events.pageX,
                    y: events.pageY,
                  },
                  {
                    x: events2.pageX,
                    y: events2.pageY,
                  }
                ) /
                that.getDistance(
                  {
                    x: that.displacement.pageX,
                    y: that.displacement.pageY,
                  },
                  {
                    x: that.displacement.pageX2,
                    y: that.displacement.pageY2,
                  }
                );
              // 图像应用缩放效果,使用定时器实现限流防抖
              if (that.ztTimer) {
                clearTimeout(that.ztTimer);
              }
              that.ztTimer = setTimeout(() => {
                // console.log("zoom",zoom);
                if (zoom > 1) {
                  that.newZoom = that.newZoom + 0.1;
                  if (that.newZoom > 0.8) {
                    that.newZoom = 0.8;
                  }
                } else {
                  that.newZoom = that.newZoom - 0.1;
                  if (that.newZoom < 0.2) {
                    that.newZoom = 0.2;
                  }
                }
                if (that.is_andriod_ios().ios) {
                  document.body.style.transform = 'scale(' + that.newZoom + ')';
                } else {
                  document.body.style.zoom = that.newZoom;
                }
              }, 100);
            }
          });
        } else {
          //缩放
          if (sessionStorage.getItem('selectedValue-' + this.scadaGuid) != 'undefined') {
            this.selectedValue = Number(sessionStorage.getItem('selectedValue-' + this.scadaGuid));
            if (this.selectedValue < 30) {
              this.selectedValue = 100;
            }
          } else if (this.defaultValue) {
            this.selectedValue = this.defaultValue;
          }
          setTimeout(() => {
            this.initLeftTop();
          }, 200);
        }
      });
    },
    // 鼠标离开
    mouseLeave(e) {
      this.mouseOperate = 'default';
    },
    // 鼠标进来
    mouseEnter(e) {
      this.mouseOperate = 'default';
    },
    // 鼠标被按下
    mouseDown(e) {
      e.stopPropagation();
      e.preventDefault();
      if (e.target.id === 'render-box') {
        let idDown = document.getElementById('render-box');
        idDown.style.cursor = 'pointer';
        this.x = e.clientX;
        this.y = e.clientY;
        this.l = idDown.offsetLeft;
        this.t = idDown.offsetTop;
        this.mouseOperate = 'render-box';
      }
    },
    // 可以拖拽状态下鼠标移动
    mouseMove(e) {
      e.preventDefault();
      if (!this.configData.layer.dragZoom) {
        return;
      }
      let point = document.getElementById('render-box');
      if (this.mouseOperate == 'render-box') {
        let nx = e.clientX; // 随着 缩放，这个值是变的
        let ny = e.clientY; // 随着 缩放，这个值是变的

        let nl = nx - (this.x - this.l);
        let nt = ny - (this.y - this.t);

        point.style.left = nl + 'px';
        point.style.top = nt + 'px';
        sessionStorage.setItem('boxLeft-' + this.scadaGuid, point.style.left);
        sessionStorage.setItem('boxTop-' + this.scadaGuid, point.style.top);
        e.stopImmediatePropagation();
      }
    },
    // 鼠标被抬起
    mouseUp(e) {
      this.mouseOperate = 'default';
      if (e.target.id === 'render-box') {
        let idDoc = document.getElementById(e.target.id);
        idDoc.style.cursor = 'default';
      }
    },
    mouseWheel(e) {
      // 滚动事件
      if (!this.configData.layer.dragZoom) {
        return;
      }
      if (e.wheelDelta >= 120) {
        this.selectedValue = this.selectedValue + 10;
      } else if (e.wheelDelta <= -120) {
        if (this.selectedValue > 30) {
          this.selectedValue = this.selectedValue - 10;
        }
      }
      // console.log('缩放',this.selectedValue);
      this.saveSf();
    },
    // 初始化左上角样式
    initLeftTop() {
      let renderApp = document.getElementById('render-app');
      if (!this.configData.layer.dragZoom) {
        renderApp.style.overflow = 'auto';
        return;
      }
      renderApp.style.overflow = 'hidden';
      if (sessionStorage.getItem('boxLeft-' + this.scadaGuid) != 'undefined') {
        let point = document.getElementById('render-box');
        point.style.left = sessionStorage.getItem('boxLeft-' + this.scadaGuid);
        point.style.top = sessionStorage.getItem('boxTop-' + this.scadaGuid);
      }
    },
    // 鼠标右键菜单响应
    onContextmenu(event) {
      this.$contextmenu({
        items: [
          {
            label: '图片生成',
            divided: true,
            icon: 'el-icon-download',
            onClick: () => {
              this.generateImage();
            },
          },
          {
            label: '全屏展示',
            icon: 'el-icon-full-screen',
            onClick: () => {
              this.clickFullscreen();
            },
          },
          {
            label: '重新加载',
            divided: true,
            icon: 'el-icon-refresh',
            onClick: () => {
              this.$router.go(0);
            },
          },
        ],
        event, // 鼠标事件信息
        customClass: 'custom-class', // 自定义菜单 class
        zIndex: 9999, // 菜单样式 z-index
        minWidth: 230, // 主菜单最小宽度
      });
      return true;
    },
    // 生成图片
    generateImage() {
      this.$modal.loading('正在生成，请稍候...');
      // 手动创建一个 canvas 标签
      const canvas = document.createElement('canvas');
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      let canvasBox = this.$refs.imageTofile;
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width);
      const height = parseInt(window.getComputedStyle(canvasBox).height);
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2;
      canvas.height = height * 2;
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true,
      };
      html2canvas(canvasBox, options).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png');
        this.downloadImage(dataURL);
        this.$modal.closeLoading();
      });
    },
    //下载图片
    downloadImage(url) {
      let a = document.createElement('a');
      a.href = url;
      a.download = document.title;
      a.click();
    },
    // 全屏展示
    clickFullscreen() {
      let element = document.getElementById('app'); // 指定全屏区域元素
      console.log(element);
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen(); // IE11
      }
    },
    ...mapMutations('topoEditor', ['setMqttData']),
    //保存缩放
    saveSf() {
      sessionStorage.setItem('selectedValue-' + this.$route.query.guid, this.selectedValue);
    },
    parseView(component) {
      return topoUtil.parseViewName(component);
    },
    // 点击节流
    throttle(component) {
      if (this.throttleTimer) {
        clearTimeout(this.throttleTimer);
      }
      let that = this;
      this.throttleTimer = setTimeout(() => {
        that.doClickComponent(component);
      }, 300);
    },
    // 点击事件
    doClickComponent(component) {
      console.log('点击事件', component);
      if (component.componentShow && component.componentShow.indexOf('单击') > -1 && component.dataBind.djAction) {
        if (component.dataBind.action == '外部链接') {
          window.open(component.dataBind.redirectUrl);
        } else if (component.dataBind.action == '组态界面') {
          console.log('组态界面', component);
          //当前页面打开
          if (component.dataBind.openModel === 1) {
            if (component.dataBind.ztPage) {
              this.scadaGuid = component.dataBind.ztPage;
              const routeUrl = this.$router.resolve({
                path: '/topo/fullscreen',
                query: {
                  id: component.dataBind.ztId,
                  guid: this.scadaGuid,
                },
              });
              window.open(routeUrl.href, '_self');
            } else {
              this.$message('无绑定组态界面');
            }
          } else if (component.dataBind.openModel === 2) {
            if (component.dataBind.ztPage) {
              this.scadaGuid = component.dataBind.ztPage;
              const routeUrl = this.$router.resolve({
                path: '/topo/fullscreen',
                query: {
                  id: component.dataBind.ztId,
                  guid: this.scadaGuid,
                },
              });
              window.open(routeUrl.href, '_blank');
            } else {
              this.$message('无绑定组态界面');
            }
          } else {
            if (component.dataBind.ztPage) {
              this.scadaGuid = component.dataBind.ztPage;
              this.childPage = true;
              if (component.dataBind.windowHeight) {
                this.windowHeight = component.dataBind.windowHeight;
              }
              if (component.dataBind.windowWidth) {
                this.windowWidth = component.dataBind.windowWidth;
              }
              this.windowPage = component.dataBind.ztPageName;
              this.childUrl = window.location.origin + '/topo/fullscreen?id=' + component.dataBind.id + '&guid=' + this.scadaGuid + '&t=' + new Date().getTime();
            } else {
              this.$message('无绑定组态界面');
            }
          }
        } else if (component.dataBind.action == '操作变量') {
          console.log('操作变量', component.dataBind.action);

          if (component.dataBind.modelValue) {
            console.log('下发指令');
            this.controChange(component.dataBind);
          } else {
            console.log('请输入变量值');
            let tipMsg = '提示：请输入变量值';
            if (component.dataBind.tipMsg) {
              tipMsg = '提示：' + component.dataBind.tipMsg;
            }
            this.$prompt(tipMsg, component.dataBind.modelName, {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              closeOnClickModal: false,
              closeOnPressEscape: false,
              inputValue: component.dataBind.modelValue == '' ? '0' : component.dataBind.modelValue,
              inputErrorMessage: '变量值不能为空',
              inputValidator: (value) => {
                if (!value) {
                  return '变量值不能为空';
                }
                if (isNaN(value)) {
                  return '变量值必须是数字';
                }
              },
            }).then(({ value }) => {
              debugger
              console.log('输入变量值为', value);

              this.controChangeInput(component.dataBind, value);
              component.dataBind.modelValue = '';
            });
          }
        } else if (component.type == 'imageSwitch' && component.dataBind.identifier) {
          console.log('imageSwitch控制', component.dataBind.action);
          if (component.dataBind.controValue == '0关1开' && component.dataAction.actualValue == '关') {
            component.dataBind.modelValue = '1';
            component.dataBind.tipMsg = component.dataBind.modelName + '关闭';
            this.controChange(component.dataBind);
          } else if (component.dataBind.controValue == '0关1开' && component.dataAction.actualValue == '开') {
            component.dataBind.modelValue = '0';
            component.dataBind.tipMsg = component.dataBind.modelName + '打开';
            this.controChange(component.dataBind);
          } else if (component.dataBind.controValue == '0开1关' && component.dataAction.actualValue == '关') {
            component.dataBind.modelValue = '0';
            component.dataBind.tipMsg = component.dataBind.modelName + '关闭';
            this.controChange(component.dataBind);
          } else if (component.dataBind.controValue == '0开1关' && component.dataAction.actualValue == '开') {
            component.dataBind.modelValue = '1';
            component.dataBind.tipMsg = component.dataBind.modelName + '打开';
            this.controChange(component.dataBind);
          } else {
            component.dataBind.modelValue = '0';
            component.dataBind.tipMsg = component.dataBind.modelName + '关闭';
            this.controChange(component.dataBind);
          }
        }

      }
      if (component.componentShow && component.componentShow.indexOf('脉冲信号') > -1 && component.dataBind.maiChongAction) {
        //脉冲信号控制
        console.log('脉冲信号控制', component.dataBind.action);
        this.maiChongControChange(component.dataBind);

      }


    },
    doDbClickComponent(component) {
      for (var i = 0; i < component.action.length; i++) {
        var action = component.action[i];
        if (action.type == 'dblclick') {
          //this.handleComponentActuib(action);
          //  console.log('组件双击了',component)
          //this.$message('组件双击了');
        }
      }
    },
    handleComponentActuib(action) {
      var _this = this;
      if (action.action == 'visible') {
        if (action.showItems.length > 0) {
          action.showItems.forEach((identifier) => {
            _this.showComponent(identifier, true);
          });
        }
        if (action.hideItems.length > 0) {
          action.hideItems.forEach((identifier) => {
            _this.showComponent(identifier, false);
          });
        }
      } else if (action.action == 'service') {
        _this.sendFun(action);
      }
    },
    showComponent(identifier, visible) {
      var spirits = this.$refs['spirit'];
      for (var i = 0; i < spirits.length; i++) {
        var spirit = spirits[i];
        if (spirit.detail.identifier == identifier) {
          spirit.detail.style.visible = visible;
          break;
        }
      }
    },
    // 判断是在手机还是电脑
    isMobile_pc() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      return flag;
    },
    // 判断是在安卓还是ios打开
    is_andriod_ios() {
      var u = navigator.userAgent;
      return {
        //移动终端浏览器版本信息
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
        webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
      };
    },
    // 控制变化/下发指令
    async controChange(item) {
      console.log('控制变化/下发指令', item);
      let isOnline = await this.getDeviceStatus(item.serialNumber);
      if (!isOnline) {
        this.$message({
          type: 'warning',
          message: '设备不在线,无法设置！',
        });
        return;
      }
      const command = {};
      command[item.identifier] = item.modelValue;
      let params = {
        identifier: item.identifier,
        serialNumber: item.serialNumber,
        modelName: item.modelName,
        productId: item.productId,
        remoteCommand: command,
        isShadow: false,
        type: item.type,
      };
      serviceInvoke(params)
        .then((res) => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: item.tipMsg != null ? item.tipMsg : '指令下发成功!',
            });
          } else {
            this.$modal.msgError(res.msg);
          }
        })
        .catch((err) => {
          console.log('指令下发失败', err);
        });
    },
    // 自定义值控制变化/下发指令
    async controChangeInput(item, value) {
      console.log('控制变化/下发指令', item);
      let isOnline = await this.getDeviceStatus(item.serialNumber);
      if (!isOnline) {
        this.$message({
          type: 'warning',
          message: '设备不在线,无法设置！',
        });
        return;
      }
      const command = {};
      command[item.identifier] = value;
      let params = {
        identifier: item.identifier,
        serialNumber: item.serialNumber,
        modelName: item.modelName,
        productId: item.productId,
        remoteCommand: command,
        isShadow: false,
        type: item.type,
      };
      serviceInvoke(params)
        .then((res) => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: item.tipMsg != null ? item.tipMsg : '指令下发成功!',
            });
          } else {
            this.$modal.msgError(res.msg);
          }
        })
        .catch((err) => {
          console.log('指令下发失败', err);
        });
    },

    // 脉冲控制变化/下发指令
    async maiChongControChange(item) {
      console.log('脉冲控制变化/下发指令', item);
      let isOnline = await this.getDeviceStatus(item.serialNumber);
      if (!isOnline) {
        this.$message({
          type: 'warning',
          message: '设备不在线,无法设置！',
        });
        return;
      }
      const command = {};
      command[item.identifier] = 1;
      let params = {
        identifier: item.identifier,
        serialNumber: item.serialNumber,
        modelName: item.modelName,
        productId: item.productId,
        remoteCommand: command,
        isShadow: false,
        type: item.type,
      };
      serviceInvoke(params)
        .then((res) => {
          if (res.code === 200) {
            console.log('item.intervalTime', item.intervalTime);
            console.log('指令下发1');
            setTimeout(() => {
              command[item.identifier] = 0;
              params.remoteCommand = command;
              serviceInvoke(params)
                .then((res) => {
                  if (res.code === 200) {
                    console.log('指令下发2');

                    this.$message({
                      type: 'success',
                      message: item.tipMsg != null ? item.tipMsg : '指令下发成功!',
                    });
                  } else {
                    this.$modal.msgError(res.msg);
                  }
                }).catch((err) => {
                  console.log('指令下发失败', err);
                });
            }, item.intervalTime * 1000)


          } else {
            this.$modal.msgError(res.msg);
          }
        }).catch((err) => {
          console.log('指令下发失败', err);
        });
    },
    // Math.hypot() 计算参数的平方根
    getDistance(start, stop) {
      return Math.hypot(stop.x - start.x, stop.y - start.y);
    },
    // 获取设备状态
    getDeviceStatus(serialNumber) {
      return new Promise((resolve, reject) => {
        const query = {
          serialNumber: serialNumber,
        };
        getDeviceStatus(query)
          .then((res) => {
            resolve(res.data === 3 ? true : false);
          })
          .catch((err) => {
            reject(false);
          });
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.ztTimer);
    this.ztTimer = null;
    clearInterval(this.deviceTimer);
    this.deviceTimer = null;
  },
};
</script>

<style lang="scss" scoped>
#render-app {
  position: absolute;
  width: 100vw;
  height: 100vh;
  transform-origin: center top;
}

.topo-render {
  overflow: auto;
  background-color: #ffffff;
  background-clip: padding-box;
  background-origin: padding-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  position: absolute;

  .topo-render-wrapper {
    position: absolute;
  }

  .topo-render-wrapper-clickable {
    cursor: pointer;
  }
}
</style>
<style>
h2 {
  line-height: 1.1;
}

.el-message-box__message {
  color: #e6a23c !important;
}

body {
  -webkit-text-size-adjust: 100% !important;
}
</style>
<style>
::-webkit-scrollbar-thumb {
  background-color: #e1e1e1;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a5a2a2;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  position: absolute;
}

::-webkit-scrollbar-track {
  background-color: #fff;
}
</style>
